<template>
  <div class="wid">
      <div class="tables" v-if = "$route.path == '/businessAM/chuchaiJH'">
          <div class="categoryWrap">
            <div class="serchLeft">
                <div>
                    <span>负责人 : </span>
                    <el-input clearable placeholder="请输入" prefix-icon="el-icon-search" v-model="value"> </el-input>
                </div>
                 <div>
                    <span>客户名称 : </span>
                    <el-input clearable placeholder="请输入" prefix-icon="el-icon-search" v-model="value"> </el-input>
                </div>
                <div>
                    <span>创建日期 : </span>
                    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                </div>
            </div>
            <div class="operatingBtn">
                <el-button @click="add" type="primary">新建</el-button>
            </div>
          </div>
          <el-table :header-cell-style="{background:'#f5f6f8'}" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" > </el-table-column>
            <el-table-column prop="number" label="序号" > </el-table-column>
            <el-table-column prop="name" label="负责人" > </el-table-column>
            <el-table-column prop="numberCode" label="负责人编号" > </el-table-column>
            <el-table-column prop="commentName" label="客户名称" > </el-table-column>
            <el-table-column prop="linkman" label="联系人" > </el-table-column>
            <el-table-column prop="phone" label="联系方式" > </el-table-column>
            <el-table-column prop="total" label="客户等级" > </el-table-column>
            <el-table-column prop="profit" label="创建时间" > </el-table-column>
            <el-table-column prop="operation" label="操作" >
                <template slot-scope="scope"> 
                    <div class="rightKH">
                        <el-button @click="add(scope.row.id)" type="primary" size="mini "> 编辑 </el-button>
                        <el-button type="danger" size="mini "> 删除 </el-button> 
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="sizes, prev, pager, next"
            :total="1000">
            </el-pagination>
        </div>
      </div>
      <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          value:"",
          tableData: [
            {
                number:1,
                name:'王五',
                numberCode:'0100000',
                commentName:"王五文化有限公司",
                linkman:"王二麻子",
                phone:"18822334455",
                total:"900000",
                profit:"200000",
                payment:"未付款",
                dayNumber:"3",
                status:"进行中",
                belonger:"2020-06-01",
                timeC:"2020-07-01",
                yuan:"内部"
            },
             {
                number:2,
                name:'王五',
                numberCode:'0100000',
                commentName:"王五文化有限公司",
                linkman:"王二麻子",
                phone:"18822334455",
                total:"900000",
                profit:"200000",
                payment:"未付款",
                dayNumber:"3",
                status:"进行中",
                belonger:"2020-06-01",
                timeC:"2020-07-01",
                yuan:"内部"
            },
        ],
        currentPage:1,
        options: [{
          value: '1',
          label: '张三'
        }, {
          value: '2',
          label: '李四'
        }, {
          value: '3',
          label: '王五'
        }, {
          value: '4',
          label: '六六'
        },],
      };
    },
    mounted() {},
    methods: {
        add(){
            // this.$router.push({path:'/businessAM/chengbenXM/subpageBJ'})
        },
        // 侧边栏选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val,"valvalval")
        },
        //分页事件   
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },

  }

</script>
<style lang='scss' scoped>
.wid{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F5F5F5;
    .topButton{
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .categoryWrap{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        box-sizing: border-box;
        padding-bottom: 0;
        .serchLeft{
            width: 80%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            >div{
                margin-right: 30px;
                margin-bottom: 20px;
            }
            >div:nth-child(3n+3){
                margin-right: 0px;
            }
            span{
                width: 110px;
                color: #333;
                font-size: 16px;
                margin-right: 20px;
                display: inline-block;
            }
            .el-input,.el-select{
                width: 250px;
            }
            .el-input__inner{
                width: 250px;
            }
        }
        .operatingBtn{
            display: flex;
            margin: 0 5px;
            align-items: center;
        }
    
    }
    .placeholder{
        width: 100%;
        height: 10px;
        background: #fff;
    }
    .crumbs{
        padding: 10px 5px;
        color: #666;
        font-size: 16px;
        background: #fff;
        margin-bottom: 20px;
    }
    .tables{
        background: #fff;
        min-height: calc(100vh - 130px);
        border-radius: 12px;
    }
    .page{
        width: 510px;
        margin: 20px auto 0;
    }
}
.rightKH{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    button{
        margin-right: 10px;
        margin-bottom: 8px;
    }
    .el-button{
        margin-left: 0;
    }
}
    ::v-deep.el-form-item{
        display: flex;
    }

    ::v-deep.el-input{
        width: 200px;
    }
    ::v-deep.el-form-item__content{
        margin-left: 0 !important;
    }
    ::v-deep.el-form-item{
        .el-form-item__label{
            width: 90px ;
        }
    }
    .el-image__preview{
        width: 50px;
    }
</style>